<template>
  <div>
    <lb-title :isBack="true"></lb-title>
    <div class="page-main">
      <el-form
        @submit.native.prevent
        :model="authForm"
        :rules="authFormRules"
        ref="authForm"
        label-width="110px"
      >
        <el-form-item label="代理等级名称" prop="title">
          <el-input
            v-model="authForm.title"
            maxlength="20"
            show-word-limit
            placeholder="请填写代理等级名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="排序值" prop="top">
          <el-input-number
            class="lb-input-number"
            v-model="authForm.top"
            :controls="false"
            :min="0"
            placeholder="请填写排序值"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="备注" prop="content">
          <el-input
            type="textarea"
            :rows="5"
            maxlength="50"
            resize="none"
            show-word-limit
            placeholder="请输入备注"
            v-model="authForm.content"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitFormInfo('authForm')">{{
            $t('action.submit')
          }}</el-button>
          <el-button type="default" @click="$router.back(-1)">{{
            $t('action.back')
          }}</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      authForm: {
        id: '',
        title: '',
        content: '',
        top: 0
      },
      authFormRules: {
        title: {
          required: true,
          type: 'string',
          message: '请填写代理等级名称',
          trigger: 'blur'
        },
        top: {
          required: true,
          type: 'number',
          message: '请填写排序值',
          trigger: 'blur'
        }
      }
    }
  },

  created () {
    this.version = JSON.parse(localStorage.getItem('vs'))
    let { id } = this.$route.query
    if (id) {
      this.getFormInfo(id)
    }
  },
  methods: {
    getFormInfo (id) {
      this.$api.agentLevelInfo({ id }).then(res => {
        if (res.code === 200) {
          for (let key in this.authForm) {
            this.authForm[key] = res.data[key]
          }
        }
      })
    },
    submitFormInfo (name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          let methodModel = this.authForm.id
            ? 'agentLevelUpdate'
            : 'agentLevelAdd'
          let subForm = JSON.parse(JSON.stringify(this.authForm))
          this.$api[methodModel](subForm).then(res => {
            if (res.code === 200) {
              this.$message.success(this.$t('tips.successSub'))
              this.$router.back(-1)
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-input,
.el-cascader {
  width: 300px;
}
.el-textarea {
  width: 400px;
}
</style>
